<template>
	<view class="goodies">
		<!-- 顶部搜索框 -->
		<nav-bars class="i_top" bgColor="#fff" fontColor="#000" backState="1000">
			<view class="i_tCan" slot="default">
				<view class="i_tInput">
					<view class="i_tIcon iconfont icon-search"></view>
					<input type="text" confirm-type="search" v-model="searchVal" @confirm="searchData"
						placeholder="搜索我的订单" placeholder-class="placeholder" />
				</view>
			</view>
		</nav-bars>

		<!-- 内容 -->
		<view class="g_contain">
			<view class="s_cTabs">
				<view class="s_ctItem" v-for="(item, index) in carTypes" :class="{ active: current == index }"
					:data-current="index" @tap="tabChange($event, item.status)">
					{{ item.name }}
					<text></text>
				</view>
			</view>
			<view class="s_cCan">
				<view class="i-product" v-for="(items, indexs) in 5" v-if="current == indexs">
					<scroll-view class="s_dList" scroll-y @scrolltolower="scrolldata">
						<view class="no-card" v-if="list.length == 0">
							<image src="https://manager.ryz1620.com/static/my/suess.png"></image>
							<view class="no-title">您还没有订单哦~~</view>
							<text>快去逛一逛吧~</text>
						</view>
						<view class="i-product-list" v-for="(item, index) in list" :key="index">
							<view class="card_top">
								<navigator class="store">
									<view class="store-name ell">产品包</view>
									<i class="iconfont icon-more"></i>
								</navigator>
								<view class="item-status" :class="'status-' + item.order_status">
									{{ status[item.order_status] }}</view>
							</view>
							<view class="orderid">订单编号:{{ item.order_code }}</view>
							<view class="goods_card" v-for="(items, indexs) in item.detail_lst" :key="indexs">
								<image @tap="orderDetail(item.order_code)" class="img" lazyLoad="true" mode="aspectFill"
									:src="items.main_imgurl"></image>
								<view class="card_right" @tap="orderDetail(item.order_code)">
									<view class="title ell-2">{{ items.product_title }}</view>
									<view class="price">￥{{ items.price }}</view>
									<view class="futitle">
										<view v-for="(attr_params, index) in items.attr_params"
											style="display: inline-block;">
											<text
												v-if="attr_params.attr_name">{{ attr_params.attr_name }}{{ attr_params.attr_value }}</text>
											<text
												v-if="attr_params.key">{{ attr_params.key }}{{ attr_params.value }}</text>
										</view>
										<view class="titlenum">x{{ items.num }}</view>
									</view>
								</view>
							</view>
							<view class="goods_price">
								总价:￥{{ item.price || 0.0 }}
								<text v-if="item.is_many_way == 1">定金:￥{{ item.deposit_price || 0.0 }}</text>
							</view>
							<view class="card_bottom" v-if="item.order_status == 1">
								<!-- #ifndef MP-WEIXIN -->
								<text class="order-bnt" @click="gitchat()">联系商家</text>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text class="order-bnt" v-if="!config_id && !config_url" @click="gitchat()">联系商家</text>
								<text class="order-bnt" v-else @click="gitpouchatshow()">联系商家</text>
								<!-- #endif -->
								<text class="order-bnt" @click="cancelOrder(item.order_code)">取消订单</text>
								<text class="order-bnt" @click="payModel(item, item.order_code)">立即付款</text>
							</view>
							<view class="card_bottom" v-if="item.order_status == 2">
								<!-- #ifndef MP-WEIXIN -->
								<text class="order-bnt" @click="gitchat()">联系商家</text>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text class="order-bnt" v-if="!config_id && !config_url" @click="gitchat()">联系商家</text>
								<text class="order-bnt" v-else @click="gitpouchatshow()">联系商家</text>
								<!-- #endif -->
								<text class="order-bnt" v-if="item.is_many_way == 1 && item.balance_status == 0"
									@click="payModel(item, item.order_code)">付尾款</text>
							</view>
							<view class="card_bottom" v-if="item.order_status == 3">
								<!-- #ifndef MP-WEIXIN -->
								<text class="order-bnt" @click="gitchat()">联系商家</text>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text class="order-bnt" v-if="!config_id && !config_url" @click="gitchat()">联系商家</text>
								<text class="order-bnt" v-else @click="gitpouchatshow()">联系商家</text>
								<!-- #endif -->
								<text class="order-bnt" v-if="item.arrive_status==0" @click="confirms(item, item.order_code)">确认收货</text>
								<text class="order-bnt" v-if="item.is_many_way == 1 && item.balance_status == 0"
									@click="payModel(item, item.order_code)">付尾款</text>
							</view>
							<view class="card_bottom" v-if="item.order_status == 4">
								<text class="order-bnt" @click="GoEvaluate(item)"
									v-if="item.comment_status == 0">评价</text>
								<!-- #ifndef MP-WEIXIN -->
								<text class="order-bnt" @click="gitchat()">联系商家</text>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text class="order-bnt" v-if="!config_id && !config_url" @click="gitchat()">联系商家</text>
								<text class="order-bnt" v-else @click="gitpouchatshow()">联系商家</text>
								<!-- #endif -->
								<text class="order-bnt" @click="deleteOrder(item.order_code)">删除订单</text>
							</view>
							<view class="card_bottom" v-if="item.order_status == 5">
								<!-- #ifndef MP-WEIXIN -->
								<text class="order-bnt" @click="gitchat()">联系商家</text>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text class="order-bnt" v-if="!config_id && !config_url" @click="gitchat()">联系商家</text>
								<text class="order-bnt" v-else @click="gitpouchatshow()">联系商家</text>
								<!-- #endif -->
								<text class="order-bnt" @click="deleteOrder(item.order_code)">删除订单</text>
							</view>
						</view>
						<view class="no-line" v-if="list.length>0">我是有底线的~~</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 二维码 -->
		<view class="qrcodepop" :style="showModal ? '' : 'display:none;'">
			<view class="qrcodecont">
				<view class="qrname">
					<view>核销二维码</view>
					<view><canvas canvas-id="myQrcode"></canvas></view>
				</view>
				<view class="iconfont icon-close" @click="handleHideCodeClick"></view>
			</view>
		</view>

		<!-- 微信客服 -->
		<view class="pouchat" v-if="pouchatshow">
			<view class="poucont">
				<view class="chatlist">
					<view class="chatml" @click="gitwxchat()" v-if="config_url">
						<image src="https://manager.ryz1620.com/static/my/wxchat.png" mode="widthFix"></image>
						<text class="t1">在线微信客服</text>
						<text class="t2">可直接联系客服</text>
					</view>
					<view class="chatml" v-if="config_id">
						<cell class="cell-service" bind:startmessage='startmessage'
							bind:completemessage="completemessage" :plugid="config_id" />
						<image src="https://manager.ryz1620.com/static/my/codechat.png" mode="widthFix"></image>
						<text class="t1">添加微信客服</text>
						<text class="t2">扫微信二维码</text>
					</view>
				</view>
				<view class="iconfont icon-close" @click="wxCodeClick"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import URL from '@/config/url.js';
	import navBar from '@/components/navBar/navBar.vue';
	import service_product from '@/service/product.js';
	import service_mall from '@/service/mall.js';
	const qrCode = require('@/utils/weapp-qrcode.js');
	export default {
		components: {
			navBar,
			// #ifdef MP-WEIXIN
			"cell": "plugin://contactPlugin/cell",
			// #endif 
		},

		data() {
			return {
				status: {
					1: '待付款',
					2: '待发货',
					3: '待收货',
					4: '已完成',
					5: '已关闭'
				},
				carTypes: [{
						name: '全部',
						status: 'all'
					},
					{
						name: '待付款',
						status: 1
					},
					{
						name: '待发货',
						status: 2
					},
					{
						name: '待收货',
						status: 3
					},
					{
						name: '已完成',
						status: 4
					}
				],
				current: 0,
				list: [],
				searchVal: '',
				page: 1,
				order_status: 'all',
				listcount: '',
				listnum: '',
				code: '',
				showModal: false,
				tapIndex: '',
				terminal: '',
				config_id: '',
				config_url: '',
				pouchatshow: false,
			};
		},

		onLoad() {
			this.$utils.getUrl()
			this.gitConfig()
			this.gitwxConfig()
			//#ifdef MP-WEIXIN
			this.terminal = 'wxapplet';
			//#endif
		},
		onShow() {
			this.getList();
		},
		methods: {
			// 获取企业微信callme配置
			gitConfig() {
				service_mall.getCallMeConfig({
					partner_type: 'root',
					partner_id: 1
				}).then(res => {
					if (res.code == 1) {
						this.config_id = res.data.config_id;
					}
				});
			},
			gitwxConfig() {
				service_mall.getwxMeConfig({
					partner_type: 'root',
					partner_id: 1
				}).then(res => {
					if (res.code == 1) {
						this.config_url = res.data.url;
					}
				});
			},
			gitpouchatshow() {
				this.pouchatshow = true
			},
			wxCodeClick() {
				this.pouchatshow = false
			},
			gitwxchat() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: this.config_url
					},
					corpId: this.$env.CORPID,
					success(res) {}
				})
			},
			scrolldata() {
				if (this.listcount > this.listnum) {
					this.page++, this.getList();
				}
			},
			GoEvaluate(row) {
				uni.navigateTo({
					url: '/pages_product/pages/product/evaluate/evaluate?ordecoder=' + row.order_code +
						'&packid=' + row.pack_id
				});
			},
			orderDetail(id) {
				uni.navigateTo({
					url: '/pages_product/pages/product/order/detail?orderid=' + id
				});
			},
			// 客服
			gitchat() {
				uni.showToast({
					title: '哎呀!不好意思，暂未配置客服...',
					icon: 'none',
					duration: 2000
				});
				// uni.navigateTo({
				// 	url: '/pages_customer/pages/index?partner_type=root&partner_id=0'
				// });
			},
			// 订单列表
			getList() {
				uni.showLoading();
				service_product
					.getNewOrderlist({
						page: this.page,
						pagesize: 10,
						order_status: this.order_status,
						keyword: this.searchVal
					})
					.then(res => {
						uni.hideLoading();
						if (res.code == 1) {
							// for(var i=0;i<res.data.data.length;i++){
							// this.list.push(res.data.data[i]); // 加载的数据追加在上一页后面
							// }
							if (this.page > 1) {
								if (!res.data.data.length) {
									uni.showToast({
										title: '没有更多了~',
										icon: 'none'
									});
									return;
								}
								this.list = this.list.concat(res.data.data);
							} else {
								this.list = res.data.data;
							}
							this.listcount = res.data.count;
							this.listnum = this.list.length;
						}
					})
					.catch(err => {
						uni.hideLoading();
					});
			},
			// 选择支付方式
			payModel(item, id) {
				let itemList = ['微信支付', '线下支付'];
				this.itemList = itemList;
				uni.showActionSheet({
					itemList: this.itemList,
					success: t => {
						this.tapIndex = t.tapIndex + 1;
						this.getpayorder(item.order_code);
					}
				});
			},
			initQrCode: function() {
				new qrCode('myQrcode', {
					text: this.code,
					width: 160,
					height: 160,
					colorDark: '#333333',
					colorLight: '#FFFFFF',
					correctLevel: qrCode.CorrectLevel.H
				});
			},
			handleShowCodeClick: function() {
				this.showModal = true;
				this.$nextTick(function() {
					this.initQrCode();
				});
			},
			handleHideCodeClick: function() {
				this.showModal = false;
			},
			getpayorder(order_codes) {
				service_mall
					.getpay({
						order_no: order_codes,
						type: 'pack_order',
						pay_type: this.tapIndex
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							if (this.tapIndex == 1) {
								if (this.terminal == 'wxapplet') {
									uni.requestPayment({
										appId: res.data.appId,
										nonceStr: res.data.nonceStr,
										package: res.data.package,
										paySign: res.data.paySign,
										signType: res.data.signType,
										timeStamp: res.data.timeStamp,
										success: suc => {
											uni.navigateTo({
												url: '/pages_product/pages/product/order/sucess?type=1' +
													'&order_no=' + order_codes
											});
										},
										fail: err => {
											uni.navigateTo({
												url: '/pages_product/pages/product/order/sucess?type=0' +
													'&order_no=' + order_codes
											});
										}
									});
								} else {
									uni.requestPayment({
										provider: 'wxpay',
										orderInfo: {
											appid: res.data.appid,
											partnerid: res.data.partnerid,
											prepayid: res.data.prepayid,
											noncestr: res.data.noncestr,
											package: res.data.package,
											timestamp: res.data.timestamp,
											sign: res.data.sign
										},
										success: suc => {
											uni.navigateTo({
												url: '/pages_product/pages/product/order/sucess?type=1' +
													'&order_no=' + order_codes
											});
										},
										fail: err => {
											uni.navigateTo({
												url: '/pages_product/pages/product/order/sucess?type=0' +
													'&order_no=' + order_codes
											});
										}
									});
								}
							} else {
								this.code = res.data.verificationCode;
								this.handleShowCodeClick();
							}
						} else {
							this.$utils.hideLoading();
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					});
			},
			// 删除订单
			deleteOrder(id) {
				let that = this;
				uni.showModal({
					title: '提示！',
					content: '是否删除该订单',
					success: function(i) {
						if (i.confirm) {
							uni.showLoading('正在删除...');
							service_product
								.packOrdercancel({
									order_code: id
								})
								.then(res => {
									uni.hideLoading();
									if (res.code == 1) {
										that.list = [];
										that.page = 1;
										uni.showToast({
											title: '删除成功！',
											icon: 'none'
										});
										that.getList();
									} else {
										uni.showToast({
											title: '删除失败！',
											icon: 'none'
										});
									}
								});
						}
					}
				});
			},
			// 确认收货
			confirms(item, id) {
				uni.navigateTo({
					url: '/pages_product/pages/product/order/confirmorder?orderid=' + id
				});
			},
			// 取消订单
			cancelOrder(id) {
				let that = this;
				uni.showModal({
					title: '提示！',
					content: '是否取消该订单',
					success: function(i) {
						if (i.confirm) {
							uni.showLoading('正在取消...');
							service_product
								.getupOrdercancel({
									order_code: id
								})
								.then(res => {
									uni.hideLoading();
									if (res.code == 1) {
										that.list = [];
										that.page = 1;
										that.getList();
									} else {
										uni.showToast({
											title: '取消失败！',
											icon: 'none'
										});
									}
								});
						}
					}
				});
			},
			tabChange(e, status) {
				this.page = 1;
				var index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current = index;
				this.order_status = status;
				this.list = [];
				this.getList();
			},
			swiperChange(e) {
				this.page = 1;
				var index = e.target.current || e.detail.current;
				this.current = index;
				this.order_status = this.carTypes[index].status;
				this.list = [];
				this.getList();
			},
			searchData() {
				this.page = 1;
				this.list = [];
				this.getList();
			},
			// 跳转分类所属商品列表
			intoStore(cateId) {
				uni.navigateTo({
					url: '/pages_mall/pages/mall/goods/list?cate_id_lst=' + cateId
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goodies {
		height: 100vh;
		display: flex;
		flex-flow: column;

		// 顶部搜索框
		.g_top {
			position: relative;
			z-index: 100;

			.g_tCan {
				width: 100%;
				height: 66rpx;
				padding-right: 24rpx;
			}

			.g_tBg {
				width: 100vw;
				height: 224rpx;
				background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);
				position: fixed;
				top: 0;
				left: 0;
				z-index: -1;
			}

			.g_tInput {
				height: 66rpx;
				border-radius: 34rpx;
				background: #fff;
				position: relative;
				opacity: 0.8;

				&>input {
					width: 100%;
					height: 100%;
					font-size: 24rpx;
					padding-left: 72rpx;
				}
			}

			.g_tIcon {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				color: #6c6c6c;
				font-size: 32rpx;
				position: absolute;
				top: 18rpx;
				left: 32rpx;
			}
		}

		// 内容
		.g_contain {
			background: #fff;
			overflow: hidden;
			display: flex;
			flex-flow: column;
			flex: 1;

			.s_cTabs {
				position: relative;
				display: flex;
				z-index: 500;

				&::after {
					content: '';
					width: 100%;
					height: 1px;
					background: rgba(0, 0, 0, 0.08);
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 2;
				}

				.s_ctItem {
					font-size: 30rpx;
					color: #333;
					display: flex;
					justify-content: center;
					align-items: center;
					flex: 1;
					line-height: 100rpx;

					&.active {
						font-weight: bold;
						position: relative;

						text {
							width: 40rpx;
							height: 5rpx;
							border-radius: 4rpx 4rpx;
							background: #fff;
							position: absolute;
							bottom: 0;
							left: 50%;
							margin-left: -20rpx;
							z-index: 1;
						}
					}
				}

				.s_ctCursor {
					width: 40rpx;
					height: 8rpx;
					border-radius: 4rpx 4rpx;
					background: #ffd425;
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 1;
					transform: translateX(166rpx);
				}
			}

			// 商品/探店 swiper
			.s_cCan {
				flex: 1;
				height: 100%;

				.s_cSwiper {
					width: 100%;
					hegiht: 100%;
				}

				.s_cSwiper-item {
					width: 100%;
					hegiht: 100%;
				}
			}
		}
	}

	.no-line {
		padding: 40rpx 20rpx;
		text-align: center;
		color: #999;
		font-size: 26rpx;
	}

	.tag-list {
		margin: 10rpx 0;
	}

	.s_dList {
		width: 100%;
		height: 100%;
		padding-bottom: 120rpx;
	}

	.i-product {
		width: 100%;
		height: 100%;
	}

	.i-product-list {
		padding: 20rpx;
		position: relative;
		margin: 20rpx;
		box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.img {
		border-radius: 8rpx;
		width: 170rpx;
		height: 170rpx;
		flex-shrink: 0;
		background-color: #f6f6f6;
	}

	.goods_card {
		display: flex;
		padding-top: 20rpx;
		align-items: center;
	}

	.card_right {
		font-size: 26rpx;
		padding-left: 30rpx;
		width: 100%;
		min-width: 300rpx;
		color: #807e7e;
	}

	.orderid {
		color: #999;
		font-size: 26rpx;
	}

	.card_bottom {
		justify-content: flex-end;
	}

	.card_bottom,
	.card_top {
		display: flex;
		align-items: center;
		padding: 15rpx 0;
	}

	.card_top {
		justify-content: space-between;
		font-size: 30rpx;
		padding-bottom: 10rpx;
		color: #777;
	}

	.item-status {
		color: #f87901;
		font-size: 28rpx;
	}

	.status-0,
	.status--1 {
		color: red;
	}

	.status-3 {
		color: green;
	}

	.title {
		width: 95%;
		font-size: 30rpx;
		color: #525050;
	}

	.goods_price {
		font-size: 28rpx;
		text-align: right;
		padding-bottom: 24rpx;
		padding-top: 20rpx;
	}

	.goods_price text {
		font-size: 32rpx;
		color: #c3ab7c;
		margin-left: 20rpx;
	}

	.pay-for {
		border: 2rpx solid #c3ab7c;
		padding: 8rpx 30rpx;
		color: #c3ab7c;
		border-radius: 40rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.order-bnt {
		border: 2rpx solid #505050;
		color: #505050;
		border-radius: 40rpx;
		position: relative;

		.cell-service {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			top: 0;
			opacity: 0;
			z-index: 10;

			.cell--bubble {
				width: 100%;
			}
		}
	}

	.order-bnt,
	.order-comfirm {
		padding: 8rpx 20rpx;
		font-size: 30rpx;
		margin-left: 20rpx;
	}

	.order-comfirm {
		border: 4rpx solid #e79e00;
		color: #eea301;
		background-color: #faf5e9;
		border-radius: 8rpx;
	}

	.index {
		position: fixed;
		left: 10rpx;
		bottom: 10rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
	}

	.tag {
		padding: 6rpx 14rpx;
		border-radius: 8rpx;
		font-size: 22rpx;
		color: green;
		background-color: #f5fff5;
		margin-right: 14rpx;
		display: inline-block;
	}

	.group-icon {
		font-size: 22rpx;
		padding: 0;
		display: inline-block;
	}

	.price {
		padding-top: 18rpx;
	}

	.futitle {
		padding-top: 18rpx;
	}

	.titlenum {
		display: inline-block;
		float: right;
	}

	.no-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx 20rpx 0 0;
		padding-top: 40rpx;
	}

	.no-title {
		padding: 30rpx 0;
	}

	.no-card>text {
		font-size: 24rpx;
		color: #999;
	}

	.no-bnt {
		padding: 10rpx 20rpx;
		margin: 20rpx;
		border: 2rpx solid #eee;
		font-size: 26rpx;
		background-color: #fff;
	}

	.no-card image {
		height: 232rpx;
		width: 288rpx;
		padding: 40rpx;
	}

	.store {
		display: flex;
		align-items: center;
		width: 400rpx;
		background-color: #fff;
	}

	.store image {
		width: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
		flex-shrink: 0;
	}

	.store-name {
		font-weight: 700;
		color: #000;
	}

	.qrcodepop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		z-index: 9999;

		.qrcodecont {
			width: 400rpx;
			position: absolute;
			left: 50%;
			top: 25%;
			margin-left: -200rpx;

			.qrname {
				background: #fff;
				line-height: 80rpx;
				height: 440rpx;
				overflow: hidden;
				padding: 20rpx;
				text-align: center;
				border-radius: 15rpx;

				canvas {
					width: 300rpx;
					height: 300rpx;
					margin: auto;
				}
			}

			.icon-close {
				display: block;
				font-size: 60rpx;
				color: #fff;
				text-align: center;
				margin: 30rpx auto;
			}
		}
	}

	// 顶部搜索框=====
	.goodies .i_top {
		position: relative;
		z-index: 999;
		background: #fff;
	
	.i_tCan {
			width: 100%;
			height: 66rpx;
			// padding-left: 32rpx;
			padding-right: 24rpx;
			/* #ifndef APP-PLUS-NVUE */
			// margin-left: 34rpx;
			width: 500rpx;
			/* #endif */
			flex: 1;
			/*#ifdef H5 || MP-WEIXIN*/
			width: 400rpx;
			/*#endif*/
		}

		.i_tBg {
			width: 100vw;
			height: 500rpx;
			background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);
			position: fixed;
			top: 0;
			left: 0;
		}

		.i_tInput {
			height: 66rpx;
			border-radius: 34rpx;
			background: #f6f7fb;
			position: relative;
			opacity: 0.8;

			&>input {
				width: 100%;
				height: 100%;
				font-size: 24rpx;
				padding-left: 72rpx;
			}
		}

		.i_tIcon {
			width: 32rpx;
			height: 32rpx;
			line-height: 32rpx;
			color: #6c6c6c;
			font-size: 32rpx;
			position: absolute;
			top: 18rpx;
			left: 32rpx;
		}
	}

	// 客服弹框
	.pouchat {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;

		.poucont {
			position: absolute;
			top: 30%;
			left: 15%;
			right: 15%;

			.icon-close {
				width: 80rpx;
				height: 80rpx;
				font-size: 70rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				margin: 30rpx auto;
			}
		}

		.chatlist {
			background: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
		}

		.chatml {
			position: relative;
			padding: 20rpx;
			padding-left: 100rpx;
			min-height: 100rpx;

			.cell-service {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: 10;

				.cell--bubble {
					width: 100%;
				}
			}

			text {
				display: block;
				line-height: 40rpx;
			}

			.t1 {
				font-size: 32rpx;
			}

			.t2 {
				font-size: 24rpx;
				color: #999;
			}

			image {
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				left: 15rpx;
				top: 25rpx;
			}
		}
	}
</style>
